<template>
    <div id="myMain">
        <div class="main-box">
            <div class="main-left">
                <img src="https://static.zhihu.com/heifetz/assets/slogan.ff994e01.png" alt="">
                  <ul>
                    <li>
                        <img src="https://static.zhihu.com/heifetz/assets/icon_comp.f2883395.png" alt="">
                        <span>企业</span>
                    </li>
                     <li>
                        <img src="https://static.zhihu.com/heifetz/assets/icon_media.21b3f436.png" alt="">
                        <span>媒体</span>
                    </li>
                     <li>
                        <img src="https://static.zhihu.com/heifetz/assets/icon_gov.9b79e734.png" alt="">
                        <span>政府</span>
                    </li>
                     <li>
                        <img src="https://static.zhihu.com/heifetz/assets/icon_org.9c2eb338.png" alt="">
                        <span>其他</span>
                    </li>
                </ul>
            </div>
            <div class="main-login">
              <input type="text" placeholder="请填写邮箱地址">
              <input type="text" placeholder="密码(不少于8位)">
              <input type="text" placeholder="验证码">
              <button>注册机构号</button>
              <div id='agreement'>
                  <p>点击[注册机构号] 按钮,即代表你同意</p>
                  <a>《知乎机构账号服务协议》《隐私政策》</a>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'myMain',
    data() {
        return {

        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#myMain{
    width: 100%;
    height:464px ;
    background-color: #DBEDFA;
    overflow: hidden;
    .main-box{
        width: 1000px;
        height: 100%;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        .main-left{
            width: 304px;
            height: 296px;
           float: left;
            margin-top: 84px;
            img{
                width: 270px;
                height: 124px;
            }
            ul{
                padding: 0;margin: 0;
                margin-top: 80px;
                list-style: none;
                width: 100%;
                height: 88px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              
                li{
                    width: 60px;
                    height: 88px;
                    text-align: center;
                      img{
                        width: 60px;
                        height: 60px;
                    }
                }
            }
            
        }
        .main-login{
           width: 400px;
           height: 384px;
           position: relative;
           background-color: #fff;
           float: right;
           margin: 32px;
           box-sizing: border-box;
           padding: 20px;
           input{
               width: 100%;
               border: none;
               border-bottom: 1px solid #ccc;
               height: 60px;
            }
            button{
                width: 100%;
                height: 40px;
                margin: 30px 0;
                background-color: blue;
                border: none;
                color: #fff;
                border-radius: 8px;
                outline: none;
            }
        }
        #agreement{
                position: absolute;
            text-align: center;
            width: 400px;
            left: 0;
            height: 80px;
            bottom: 0;
            box-sizing: border-box;
            padding-top: 20px;
            line-height: 20px;
            background-color: #ccc;
            p{
                font-size: 14px;
                color: #eee;
            }
            a{
                font-size: 14px;
                color: blue;
            }
        }
    }
}
</style>
